import { Button, Drawer } from 'antd';
import { ISlotRegister, IModuleRegistry } from '../../../core';

import Header from './header';
import { ActionCreators } from 'redux-undo';
import { useDispatch } from 'react-redux';
import { useState } from 'react';
import { useStateFromRedux } from '../dragger/reducer';
import Editor from '../../components/editor';
import { PageConfig } from './pageConfig';
import { AddPage } from './addPage';
import { SelectPage } from './selectPage';

export interface IHeaderButtonProps {
    title: string
    type: 'forward' | 'back'
}

export function HeaderButton({ title, type }: IHeaderButtonProps) {
    const dispatch = useDispatch();
    const onClick = () => {
        if (type === 'back') dispatch(ActionCreators.undo());
        if (type === 'forward') dispatch(ActionCreators.redo());
    }

    return <Button style={{ marginRight: 10 }} onClick={onClick}>{title}</Button>
}


export function ViewDSL() {
    const [open, setOpen] = useState(false);
    const [cards] = useStateFromRedux('cards');

    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };

    return (
        <>
            <Button style={{ marginRight: 10 }} onClick={showDrawer}>数据结构</Button>
            <Drawer size='large' title="数据结构" onClose={onClose} open={open}>
                <Editor
                    readOnly={true}
                    language={'json'}
                    value={JSON.stringify(cards, null, 2)}
                    onCancel={onClose}
                    onOk={onClose}
                ></Editor>
            </Drawer>
        </>
    );
}


export default class HeaderModule implements IModuleRegistry {

    registerComponent(register: ISlotRegister) {
        register.register({
            component: Header,
            props: {},
            slot: 'layout-top',
            componentSlot: ['layout-topLeft', 'layout-topCenter', 'layout-topRight']
        })

        

        register.register({
            component: () => <HeaderButton title="后退" type="back"></HeaderButton>,
            props: {},
            slot: 'layout-topCenter',
        })

        register.register({
            component: () => <HeaderButton title="前进" type="forward"></HeaderButton>,
            props: {},
            slot: 'layout-topCenter',
        })

        register.register({
            component: () => <ViewDSL></ViewDSL>,
            props: {},
            slot: 'layout-topCenter',
        })

        register.register({
            component: () => <Button style={{ marginRight: 10 }} target="_Blank" href='./preview'>预览</Button>,
            props: {},
            slot: 'layout-topRight',
        })

        register.register({
            component: () => <PageConfig></PageConfig>,
            props: {},
            slot: 'layout-topRight',
        })

        register.register({
            component: () => <AddPage />,
            props: {},
            slot: 'layout-topRight',
        })

        register.register({
            component: () => <SelectPage />,
            props: {},
            slot: 'layout-topLeft',
        })
    }
}